@* 颜色选择器编辑器视图 - 用于为 ColorField 字段提供可视化颜色选择功能。
    通过 Pickr 插件实现颜色选择，支持脚本和样式资源的动态加载。
    通过 tag helper 的 at 属性可以指定资源插入的位置（Head 或 Foot）。
    该视图还演示了如何初始化 JS 颜色选择器并与表单字段联动。 *@

@model Ruitu.Edu.TrainingDemo.ViewModels.EditColorFieldViewModel
@using Ruitu.Edu.TrainingDemo.Settings
@using OrchardCore.ContentManagement.Metadata.Models

@{
    var settings = Model.PartFieldDefinition.GetSettings<ColorFieldSettings>();
    const string BlockName = "colorField";
    var pickerInputElementId = Html.IdFor(m => m.Value);
    var pickerElementId = $"{pickerInputElementId}-ColorPicker";
}

@* Script and styling resources can be used in these shapes. We'll get to it really soon but first go through this file
    and understand what is happening. Pickr is a javascript plugin used for displaying color pickers. With these two tag
    helpers all the necessary scripts and styles will be loaded. To specify where the resources should be displayed you can
    use the "at" attribute (either in the "Head", i.e. in the <head> tag, or "Foot", just before </body>). For styles it's
    "Head" by default (and Foot doesn't really make sense). For scripts it will be a local script if the "at" attribute is
    missing.*@

<script asp-name="Pickr" at="Head"></script>
<style asp-name="Ruitu.Edu.TrainingDemo.ColorPicker"></style>

<fieldset class="form-group @BlockName @(BlockName)_editor_colorPicker">
    <legend class="@(BlockName)__displayName">@Model.PartFieldDefinition.DisplayName()</legend>

    <label asp-for="ColorName" class="form-label @(BlockName)__label">@T["Color name"]</label>
    <input asp-for="ColorName" class="form-control @(BlockName)__input" />

    <div id="@pickerElementId" class="@(BlockName)__picker"></div>
    <input asp-for="Value" type="hidden" class="@(BlockName)__input" readonly />
    @if (!string.IsNullOrEmpty(settings.Hint))
    {
        <span class="hint @(BlockName)__hint">@settings.Hint</span>
    }
</fieldset>

@* 以下脚本用于初始化颜色选择器，at="Foot" 表示脚本插入到 body 末尾。 *@
<script at="Foot" type="text/javascript">
    //<![CDATA[
    (function () {
        new Pickr({
            el: '#@pickerElementId',
            default: '@Model.Value',
            components: {
                preview: true,
                opacity: true,
                hue: true,
                interaction: {
                    input: true,
                    clear: true,
                    save: true
                }
            },
            onSave(hsva) {
                document.getElementById('@pickerInputElementId').value = hsva ? hsva.toHEX().toString() : '';
            }
        });
    })();
    //]]>
</script>

@* 训练部分结束：内容字段显示与编辑器选项 *@
@* 下一站：ResourceManifest.cs *@
